<template>
  <div id="container"></div>
  <div style="margin:10px;background-color: #f2f2f2;padding: 10px;border-radius: 5px;">当前地址：{{address}}</div>
  <van-field
      id="input_id"
      v-model="inputAddress"
      label="搜索地址"
      left-icon="smile-o"
      right-icon="search"
      placeholder="请输入地址"
      @clickRightIcon="console.log('click right icon')"
      style="background-color: #f2f2f2;margin: 10px auto;"
  />
  <div style="display: flex; justify-content: center;align-items: center;">
    <van-button type="success" @click="getAddress(lnglat.value)" style="display: block; margin: 10px 10px;">确 定 定 位</van-button>
    <van-button type="primary" @click="router.back()">返 回 首 页</van-button>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {useRouter} from "vue-router";

const router = useRouter();

let map = null;

//搜索地址
const inputAddress = ref('');
const keyword = ref('');

//实时坐标
const lnglat = ref();
// const lat = {//当前位置
//   lng: 113.2986804, lat: 113.2986804
// }
//当前位置
const lat = [113.2986804, 113.2986804]

const address = ref();//实时地址
var loader = null;
let marker = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "1e1a50f7b77163c232647f65674000b2",
  };
  loader = AMapLoader.load({
    key: "56d5805d132e292d98c0d3c56b065559", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.HawkEye", "AMap.Geolocation","AMap.Geocoder","AMap.AutoComplete","Amp.Marker"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }).then((AMap) => {
    map = new AMap.Map("container", {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      // center: [113.2986804, 23.0916062], // 初始化地图中心点位置 广东省广州市番禺区
      center: [125.324000,43.816202], // 初始化地图中心点位置 吉林省长春市南关区
    });
    //异步加载控件
    AMap.plugin("AMap.ToolBar",function(){
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar); //添加控件
    });
    //异步加载控件
    AMap.plugin("AMap.HawkEye",function(){
      var hawkEye = new AMap.HawkEye();
      map.addControl(hawkEye); //添加控件
    });
    //异步加载控件
    AMap.plugin("AMap.Geolocation",function(){
      var geolocation = new AMap.Geolocation();
      map.addControl(geolocation); //添加控件
    });
    //异步加载 AutoComplete 插件
    AMap.plugin("AMap.AutoComplete", function () {
      var autoOptions = {
        //city 限定城市，默认全国
        city: "全国",
        input: "input_id", //输入框的ID
      };
      //实例化AutoComplete
      var autoComplete = new AMap.AutoComplete(autoOptions);
      //根据关键字进行搜索 keyword 为搜索的关键词
      autoComplete.search(inputAddress.value, function (status, result) {
        //搜索成功时，result 即是对应的匹配数据
        // console.log('result',result);
      });
    });

    //创建一个 Marker 实例：
    marker = new AMap.Marker({
      // position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      position: [113.2986804, 23.0916062], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    });
    //将创建的点标记添加到已有的地图实例：
    map.add(marker);

    map.on("click", function (ev) {
      //触发事件的对象
      var target = ev.target;
      //触发事件的地理坐标，AMap.LngLat 类型
      lnglat.value = ev.lnglat;

      //修改 marker 位置
      map.remove(marker);
      //创建一个 Marker 实例：
      marker = new AMap.Marker({
        // position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        position: [lnglat.value.lng, lnglat.value.lat], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      });
      //将创建的点标记添加到已有的地图实例：
      map.add(marker);
    });
  }).catch((e) => {
    console.log(e);
  });
});


onUnmounted(() => {
  map?.destroy();
});


let geocoder = null;
//获取实时坐标后，根据坐标逆解析地址
function getAddress() {
  window._AMapSecurityConfig = {
    securityJsCode: "1e1a50f7b77163c232647f65674000b2",
  };
  AMapLoader.load({
    key: "56d5805d132e292d98c0d3c56b065559", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }).then((AMap) => {
    geocoder = new AMap.Geocoder({
      city: '全国',
      radius: 1000, //范围，默认3000
      extensions: "all", //返回结果控制，默认'base'
      // batch: true, //是否批量查询，默认false
      // panel: "panel", //结果面板，默认'float'
    })
    geocoder.getAddress(lnglat.value, function (status, result) {
      if (status === "complete" && result.info === "OK") {
        if (result && result.regeocode){
          address.value = result.regeocode.formattedAddress; //地址描述
          // console.log(address.value);
        }
      }
    });
  });
}

</script>


<style scoped>
#container {
  width: auto;
  height: 400px;
}
</style>
